import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Row, Card, Col, Table, Button, Modal, Input, Form, Popconfirm } from 'antd';
import { useState } from 'react';
import { queryHotWordLists, updateHotWord, createHotWord, deleteHotWord } from '@/services/search';
import { useEffect } from 'react';

function HotManage ( props ) {

    const [ form ] = Form.useForm();
    //|--热点词汇
    const [ hotWordLists, setHotWordLists ] = useState( [] );
    //|--是否编辑
    const [ mode, setMode ] = useState( 'create' );
    const [ isModalDisplay, setIisModalDisplay ] = useState( false );
    //|--当前操作热词id
    const [ current_hot, setHot ] = useState( {} );
    //|--热点词汇获取
    useEffect( () => {
        queryHot();
    }, [] );

    const queryHot = async () => {
        const res = await queryHotWordLists();
        console.log( res );
        if ( res.code == 0 )
        {
            setHotWordLists( res.data );
        }

    };

    //|--新建
    const handleCreate = () => {
        setIisModalDisplay( true );
        setMode( 'create' );
    };
    //|--编辑modal
    const handleEdit = ( value ) => {
        setHot( value );
        form.setFieldsValue( value );
        setMode( 'edit' );
        setIisModalDisplay( true );
    };
    //|--关闭Modal
    const handleModalClose = () => {
        setHot( {} );
        setIisModalDisplay( false );
        form.resetFields();

    };
    //|--提交编辑
    const handleSubmit = () => {
        console.log( '内容' );

        form.validateFields().then( values => {
            if ( mode == 'create' )
            {
                save( values );
            } else
            {
                const payload = {
                    ...values,
                    id: current_hot._id
                };
                update( payload );
            }

        } );
    };
    //|---请求函数
    const save = async ( payload ) => {
        const res = await createHotWord( payload );
        if ( res.code == 0 )
        {
            queryHot();
            handleModalClose();

        }
    };
    const update = async ( payload ) => {
        const res = await updateHotWord( payload );
        if ( res.code == 0 )
        {
            queryHot();
            handleModalClose();

        }
    };
    // 删除热点
    const handleDelete = async ( id ) => {
        const payload = {
            id: id
        };
        const res = await deleteHotWord( payload );
        if ( res.code == 0 )
        {
            queryHot();
            handleModalClose();

        }
    };
    const columns = [
        {
            title: "标题",
            dataIndex: "title",
            key: "title"
        },
        {
            title: "创建时间",
            dataIndex: "createdAt",
            key: "createdAt"
        },
        {
            title: "编辑",
            dataIndex: "action",
            key: "action",
            align: "center",
            render: ( text, record ) => {
                return (
                    <div>
                        <Button type="link" onClick={ () => handleEdit( record ) }>编辑</Button>
                        <Popconfirm
                            title="确定删除吗？"
                            onConfirm={ () => handleDelete( record._id ) }>
                            <Button type="link" style={ { color: "red" } }>删除</Button>
                        </Popconfirm>

                    </div>

                );
            }
        }
    ];

    // Modal配置
    const formItemLayout = {
        labelCol: {
            xs: { span: 6 },
            sm: { span: 8 },
        },
        wrapperCol: {
            xs: { span: 18 },
            sm: { span: 16 },
        },
    };
    const config = {
        rules: [ { required: true, message: '请输入标题' } ],
    };
    return (
        <PageHeaderWrapper>
            <Row gutter={ 24 }>
                <Col span={ 12 } xxl={ 12 } xl={ 12 } lg={ 12 } xs={ 24 }>
                    <Card title="热词管理" extra={ <Button type="primary" onClick={ handleCreate }>添加</Button> }>
                        <Table
                            dataSource={ hotWordLists }
                            columns={ columns }
                        />
                    </Card>
                </Col>
                <Col span={ 12 } xxl={ 12 } xl={ 12 } lg={ 12 } xs={ 24 }>
                    <Card title="搜索配置">

                    </Card>
                </Col>
            </Row>
            {/* 热词Modal */ }
            <Modal
                title="热词管理"
                visible={ isModalDisplay }
                onCancel={ handleModalClose }
                destroyOnClose
                onOk={ handleSubmit }
            >
                <Form
                    form={ form }
                    initialValues={ { title: current_hot.title } }
                    { ...formItemLayout }>
                    <Form.Item shouldUpdate label="标题" name="title" { ...config }>
                        <Input></Input>
                    </Form.Item>
                </Form>
            </Modal>
        </PageHeaderWrapper>
    );
}

export default HotManage;